<template>
  <!-- 主布局 -->
  <div class="container">
    <!-- 搜索表单布局区域 -->
    <div class="search-box">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="searchFormRef"
      >
        <!-- 表单项 prop的值要和input对象绑定的值一致 -->
        <el-form-item label="请假类型" prop="type">
          <el-input
            v-model="formInline.name"
            placeholder="请输入员工名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="name">
          <!-- 选择菜单 -->
          <el-select
            v-model="formInline.department"
            placeholder="请选择部门信息"
          >
            <el-option label="运营部" value="运营部"></el-option>
            <el-option label="技术部" value="技术部"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 新增菜单区域 -->
    <el-table
      :data="attendList"
      style="width: 100%"
      :header-cell-style="{ background: '#5ab7c4', color: '#fff' }"
    >
      <!-- 设置table表头背景颜色 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="请假类型" prop="type">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="总时长" prop="type">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="开始时间" prop="createTime">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="请假时长" prop="type">
              <span>{{ props.row.endurance }}</span>
            </el-form-item>
            <el-form-item label="结束时间" prop="type">
              <span>{{ props.row.endTime }}</span>
            </el-form-item>
            <el-form-item label="审批过程" prop="type">
              <div class="steps-box">
                <el-steps :space="40" direction="vertical" :active="1">
                  <el-step title="步骤 1"></el-step>
                  <el-step title="步骤 2"></el-step>
                  <el-step title="步骤 2"></el-step>
                  <el-step
                    title="步骤 3"
                    description="这是一段很长很长很长的描述性文字"
                  ></el-step>
                </el-steps>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="审批流程" prop="id"> </el-table-column>
      <el-table-column align="center" label="状态" prop="name">
      </el-table-column>
      <el-table-column label="创建时间" prop="name"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { checklist } from "@/api/employee/index"; //引入外部接口
export default {
  created() {
    this.queryAttendList();
  },
  data() {
    return {
      formInline: {
        region: "",
        name: "",
        sex: "",
        degree: "",
      },
      //搜索栏数据绑定
      formData: {
        name: "",
        type: "",
        createTime: "",
        endTime: "",
        endurance: "",
        state: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 10, //默认每页最大数为10，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
      //表单数据
      //请假状况列表
      attendList: [
        {
          id: "underfied",
          name: "好滋好味鸡蛋仔",
          // category: "江浙小吃、小吃零食",
          // desc: "荷兰优质淡奶，奶香浓而不腻",
          // address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          // shopId: "10333",
          // type: "",
          createTime: "",
          endTime: "",
          endurance: "",
          // state: "",
          // pageIndex: 1, //当前页码，为第一页
          // pageSize: 10, //默认每页最大数为10，可以动态的切换每页最大数}
        },
      ],
    };
  },
  methods: {
    //获取所有的请假状况方法。
    queryAttendList() {
      var $that = this;
      checklist(this.attendList).then((res) => {
        if (res.code == 200 && res.success == "success") {
          $that.attendList = res.data.list;
          $that.pageInfo.total = res.data.total;
        }
      });
    },
  },
};
</script>

<style Lang="less" scoped>
.steps-box {
  margin: 10px 50px;
}
demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>  